<template>
  <div class="container">
    <router-view/>
    <el-container>
      <el-header>药品管理</el-header>
      <el-main>
        <el-row>
          <el-col :span="3" class="input-col">
            <el-input v-model="form.title" placeholder="请输入关键字"></el-input>
          </el-col>
          <el-col :span="5" class="input-col">
            <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="开始日期"
                style="width: 100%;"
                format="yyyy-MM-dd"
            />
          </el-col>
          <el-col :span="5" class="input-col">
            <el-date-picker
                v-model="form.endDate"
                type="date"
                placeholder="结束日期"
                style="width: 100%;"
                format="yyyy-MM-dd"
            />
          </el-col>
          <el-col :span="3" class="input-col">
            <el-button type="primary" @click="findAll" class="aa">查询</el-button>
          </el-col>
          <el-col :span="8" class="input-col" align="right">
            <el-button type="primary" @click="toAdd" class="aa">发布药品信息</el-button>
          </el-col>
        </el-row>

        <el-table :data="tableData" border>
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="image_url" label="列表图">
            <template slot-scope="scope">
              <img
                  style="width: 120px; height: 80px; object-fit: cover;"
                  :src="scope.row.image"
                  alt="图片加载失败"
              />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="药品标题"></el-table-column>
          <el-table-column prop="category" label="药品分类"></el-table-column>
          <el-table-column prop="publisher" label="发布人"></el-table-column>
          <el-table-column prop="status" label="发布状态">
            <template slot-scope="scope">
              {{ scope.row.status == 0 ? '已发布' : (scope.row.status == 1 ? '未发布' : '已下架') }}
            </template>
          </el-table-column>
          <el-table-column prop="drugSpecifications" label="药品规格"></el-table-column>
          <el-table-column prop="operationTime" label="操作时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" @click="toUpdate(scope.row)">编辑</el-button>
              <el-button type="danger" @click="toDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

<!--        <el-pagination-->
<!--            background-->
<!--            layout="total, prev, pager, next"-->
<!--            :total="total"-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="current"-->
<!--            :page-size="pageSize">-->
<!--        </el-pagination>-->

        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
          <el-form ref="form" :model="pojo" label-width="100px">
            <el-form-item label="药品名称">
              <el-input v-model="pojo.title"></el-input>
            </el-form-item>
            <el-form-item label="药品图片">
              <el-upload
                  class="avatar-uploader"
                  name="file"
                  action="http://localhost:8230/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :accept="'.jpeg,.jpg,.png,.gif'"
              >
              <template v-if="imageUrl">
                <img :src="imageUrl" class="avatar" alt="Uploaded Image" />
              </template>
              <template v-else>
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </template>
              </el-upload>
            </el-form-item>
            <el-form-item label="药品分类">
              <el-select v-model="pojo.category" placeholder="请选择" clearable>
                <el-option label="处方药" :value="'处方药'"></el-option>
                <el-option label="非处方药" :value="'非处方药'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="药品规格">
              <el-input v-model="pojo.drugSpecifications"></el-input>
            </el-form-item>

            <el-form-item label="药品详情">
              <el-input v-model="pojo.drugDetails"></el-input>
            </el-form-item>
<!--            <el-form-item label="生产日期">-->
<!--              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="pojo.operationtime" style="width: 100%;"></el-date-picker>-->
<!--            </el-form-item>-->
            <el-form-item label="排序号">
              <el-input v-model="pojo.favoritesCount"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="change()">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      form: {},
      total: 0,
      current: 1,
      pageSize: 100,
      title: "添加",
      dialogVisible: false,
      pojo: {},
      tx: [],
      imageUrl: "",
    };
  },
  methods: {


    handleSizeChange(val) {
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.findAll();
    },
    findAll() {
      this.axios.post(`http://localhost:8230/settings-drug/cc/${this.current}/${this.pageSize}`, this.form)
          .then(res => {
            // 看一下res的结构
            console.log(res.data);
            this.tableData = res.data.data.records;
            this.total = res.data.data.total; // 确保这个值在返回的JSON中
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
    },
    toAdd() {
      this.title = "添加";
      this.pojo = {};
      this.dialogVisible = true;
    },
    change() {
      this.axios.post(`http://localhost:8230/settings-drug/change`, this.pojo)
          .then(res => {
            if (res.data) {
              this.dialogVisible = false;
              this.findAll();
            }
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
    },
    toUpdate(obj) {
      this.title = "修改";
      this.pojo = {...obj};
      this.dialogVisible = true;
      this.imageUrl = obj.image;
  },
    toDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(`http://localhost:8230/settings-drug/delete/${id}`)
            .then(res => {
              if (res.data) {
                this.findAll();
              }
            })
            .catch(error => {
              console.error('请求失败:', error);
            });
      }).catch(() => {
      });
    },
    handleAvatarSuccess(res, file) {
      this.pojo.image = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  },
    created() {
      this.findAll();
    }

}
</script>

<style>
.container {
  background-color: #F2F7FB;
  border: 1px solid #d3dce6;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  width: 90%;
  height: 90%;
  overflow: auto;
}

.input-col {
  background-color: #F2F7FB;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.aa{
  width: 100px;
  height: 30px;
}

</style>